<template>
	<li class="list-group-item">
		<div class="handle">
			<a href="javascript:;" @click="del">删除</a>
		</div>
		<p class="user"><span >{{comment.name}}</span><span>说:</span></p>
		<p class="centence">{{comment.content}}</p>
	</li>
</template>

<script>
	export default {
		props:{ // 指定属性名和属性值的类型
			comment:Object,
			delComment:Function,
			index:Number
		},
		methods:{
			del() {
				const {comment, index, delComment} = this;
				const userName = comment.name;
				if(window.confirm('主人，您确定要【' + userName + "】离开您么，好桑心，，，要不您再想想~~~呜呜呜")) {
					this.delComment(this.index);
				}
			}
		}
	}
</script>

<style>
	li {
	  transition: .5s;
	  overflow: hidden;
	}
	.handle {
	  width: 40px;
	  border: 1px solid #ccc;
	  background: #fff;
	  position: absolute;
	  right: 10px;
	  top: 1px;
	  text-align: center;
	}
	.handle a {
	  display: block;
	  text-decoration: none;
	}
	.list-group-item .centence {
	  padding: 0px 50px;
	}
	.user {
	  font-size: 22px;
	}
</style>
